<!--危房整治-->
<template>
  <div id="decrepitHouse">
    <!--<div class="title">-->
    <!--<span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">-->
    <!--<van-icon name="arrow-left" />返回-->
    <!--</span>-->
    <!--<span style="float: right;position: absolute;right: 5px;">-->
    <!--&lt;!&ndash; <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/shaixuan.png" /> &ndash;&gt;-->
    <!--</span>-->
    <!--重点排查-->
    <!--</div>-->
    <div style="padding: 10px">
      <van-cell-group>
        <van-field right-icon="search" style="background: #EEEEEE;border-radius: 5px;" v-model="value" placeholder="请输入信息" />
      </van-cell-group>
    </div>
    <div v-if="contentData.length==0" style="height: 78vh;text-align:center;padding-top: 20vh;">
      <div style="margin-bottom: 10px;">
        <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
      </div>
      <div>暂无数据</div>
    </div>
    <div class="content" v-else>
      <ul>
        <li v-for="(item,index) in contentData" @click="contentDataClick(item)" :key="index">
          <p style="font-weight: bold;height: 30px;">
            <span style="float: left">{{item.F_HOUSEAPPLICANT}}</span>
            <span v-if="item.F_HEALTH_DICNAME&&nowIndex===1" :style="{float:'right',color:item.F_HEALTH_DICNAME==='正常'?'#007AFF':'#D70F27'}">{{item.F_HEALTH_DICNAME}}</span>
            <span v-if="item.F_HEALTH_DICNAME&&nowIndex===0" :style="{float:'right',color:item.F_HEALTH_DICNAME==='Ⅱ级'?'#e6a23c':'#D70F27'}">{{item.F_HEALTH_DICNAME}}</span>
          </p>
          <p style="font-size: 14px;color: #848484;height: 30px;">
            <span style="float: left">联系电话：{{item.F_APPLYPHONE}}</span>
            <span style="float: right">发布时间：{{item.F_APPLYTIME}}</span>
          </p>
          <p style="clear: both;display: flex;">
            <img style="margin-right: 10px;" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
            <span style="font-size: 14px;color:#007AFF">{{item.F_PERMANENTADDR}}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <ul>
        <li v-for="(item,index) in bottomData" :key="index" @click="bottomClick(index)" :style="{color:nowIndex===index?'#007AFF':'#000'}">
          <img v-if="nowIndex===index" style="width: 16px;" :src="item.icon" />
          <img v-else style="width: 16px;" :src="item.icons" />
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import { FileServerProxy, } from '../../utils/api'
  export default {
    data() {
      return {
        value:'',
        nowIndex: 0,
        contentData: [
          {
            name: '王XX',
            BH: '联系电话：13700000000',
            time: '排查时间:2021-12-22',
            address: '杭州市临安区太湖源镇里畈村１组里畈27号',
            YPC: '疑似危房',
            WGSH: 'Ⅰ级'
          },
          {
            name: '户主：XX村王XX',
            BH: '联系电话：13700000000',
            time: '排查时间:2021-12-22',
            address: '杭州市临安区太湖源镇里畈村１组里畈27号',
            YPC: '正常',
            WGSH: 'Ⅰ级'
          },
          {
            name: '户主：XX村王XX',
            BH: '联系电话：13700000000',
            time: '排查时间:2021-12-22',
            address: '杭州市临安区太湖源镇里畈村１组里畈27号',
            YPC: '疑似危房',
            WGSH: 'Ⅱ级'
          },
          {
            name: '户主：XX村王XX',
            BH: '联系电话：13700000000',
            time: '排查时间:2021-12-22',
            address: '杭州市临安区太湖源镇里畈村１组里畈27号',
            YPC: '疑似危房',
            WGSH: '危房排查'
          },
          {
            name: '户主：XX村王XX',
            BH: '联系电话：13700000000',
            time: '排查时间:2021-12-22',
            address: '杭州市临安区太湖源镇里畈村１组里畈27号',
            YPC: '疑似危房',
            WGSH: 'Ⅰ级'
          },
          {
            name: '【镇街审核】XX村王XX',
            BH: '联系电话：13700000000',
            time: '排查时间:2021-12-22',
            address: '杭州市临安区太湖源镇里畈村１组里畈27号',
            YPC: '疑似危房',
            WGSH: 'Ⅰ级'
          },
          {
            name: '【镇街审核】XX村王XX',
            BH: '房屋编号:4454551554115',
            time: '申请时间:2021-12-22',
            address: '杭州市临安区太湖源镇里畈村１组里畈27号',
            YPC: '疑似危房',
            WGSH: 'Ⅰ级'
          },
          {
            name: '【镇街审核】XX村王XX',
            BH: '房屋编号:4454551554115',
            time: '申请时间:2021-12-22',
            address: '杭州市临安区太湖源镇里畈村１组里畈27号',
            YPC: '疑似危房',
            WGSH: 'Ⅰ级'
          }
        ],
        bottomData: [
          {
            name: '我的待办',
            icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/3.png',
            icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/3-1.png'
          },
          {
            name: '我的已办',
            icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/4.png',
            icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/4-1.png'
          }
        ]
      }
    },
    methods: {
      onClickLeft() {
        this.$router.push({
          path: '/FeatureList'
        })
      },
      bottomClick(index) {
        this.nowIndex = index
        this.getData()
      },
      getData: async function (){
        let dataguid = 'a9f32773-7293-4d2f-b1a9-3b8949479ec1'
        if (this.nowIndex == 0){
          dataguid = 'a9f32773-7293-4d2f-b1a9-3b8949479ec1'
        }else{
          dataguid = '4d054fb3-5152-407b-addd-cdf207eb74fe'
        }
        let params = {
          accessCode: '688bd3883572440a859dfd8ba9194e7b',
          cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
          params: {
            dataguid: dataguid,
            searchObject: JSON.stringify([]),
            token: window.localStorage.getItem('token')
          }
        }
        const res = await FileServerProxy(params)
        let data = JSON.parse(res.data.data).Data
        this.contentData = data
      },
      contentDataClick(item) {
        if (this.nowIndex === 0) {
          this.$router.push({
            path: '/decrepitHouseYB',
            query:{
              data:JSON.stringify(item),
              type:true
            }
          })
        } else {
          this.$router.push({
            path: '/decrepitHouseYB',
            query:{
              data:JSON.stringify(item),
              type:false
            }
          })
        }
      }
    },
    mounted(){
      this.getData()
      dd.ready(function () {
        dd.setTitle({
          title: '危房整治'
        })
          .then(res => {
          })
          .catch(err => {
            console.error(err)
          })
      })
    }
  }
</script>
<style lang="scss" scoped >
  #decrepitHouse {
    height: 100vh;
    overflow: auto;
    background: #ffffff;
    /*font-size: 14px;*/
    .title {
      width: 100%;
      height: 50px;
      background: #007aff;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
      position: relative;
    }
    .content {
      height: calc(100vh - 124px);
      overflow: auto;
      padding: 10px;
      ul li {
        height: 95px;
        border-bottom: 1px solid #d2d2d2;
        margin-bottom: 10px;
      }
    }
    .bottom {
      height: 60px;
      padding-top: 10px;
      text-align: center;
      ul li {
        float: left;
        width: 50%;
      }
    }
  }
</style>
